<template>
	<view class="container">
		<carHeader :title="'汽车保养'"></carHeader>
		 <view class="baoyang">
		 	<view class="box1">
		 		<view class="box1-1">
		 			<image src="../../static/车联网服务-03车辆维修-03门店详情_slices/泰山汽车服务站.png" mode="widthFix"></image>
		 		</view>
				<view class="box1-2">
					<view class="box1-2-1">
						<p>大美汽车保养厂（解放路点）</p>
						<image v-for="n in 4" :key="n" class="startimg" src="../../static/车联网服务-04汽车保养_slices/五星 拷贝.png" mode=""></image>
			<!-- 			<image class="startimg" src="../../static/车联网服务-04汽车保养_slices/五星 拷贝.png" mode=""></image>
						<image class="startimg" src="../../static/车联网服务-04汽车保养_slices/五星 拷贝.png" mode=""></image>
						<image class="startimg" src="../../static/车联网服务-04汽车保养_slices/五星 拷贝.png" mode=""></image> -->
						<text>4分&nbsp;&nbsp;&nbsp; 销量：556</text>
					</view>
					<view class="box1-2-2">
						<text>营业时间：周一至周五 早上8:00-网上22:00</text><br />
						<text>位置：山阳区人民路与解放路交叉口</text>
						<image src="../../static/车联网服务-05就近加油_slices/plane@2x.png" mode=""></image>
					</view>
				</view>
		 	</view>
			<view class="box2">
				<text class="fwtitle">服务项目</text>
				<view v-for="(item, index) in checkboxList" :key="index" class="fwall">    
					<view class="taocan">
						<view class="box2-1">
							<u-checkbox
							  v-model="item.isChecked"  
							  @change="handleCheckChange(index)"
							 :shape="'circle'"
							 :size="'20rpx'"
							>
							</u-checkbox>   
							<span :style="{ color: item.isChecked ? '#2979FF' : 'black' }">{{ item.name }}</span> 
						</view>
						<view class="box2-2">
							<text class="tx1">￥{{item.newmoney}}</text>
							<text class="tx2">￥{{item.oldmoney}}</text>
						</view>
					</view>
					<view class="xiaoqing">
						<text>{{item.xiangqing}}</text>
					</view>
				  </view>  
			</view>
			<view class="box3">
				<text>服务评价</text>
				 <view v-for="(review, index) in reviews" :key="index" class="review-item">  
				 <view class="img">
				 	<image src="https://img1.baidu.com/it/u=2148002681,1482662620&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" mode=""></image>
				 </view>
				    <view class="review-header">  
				        <span class="user-name">黄**</span>  
				        <span class="date">{{ review.date }}</span>
					</view> 
				    <view class="stars">  
				        <span v-for="n in review.stars" :key="n" class="star">★</span>  
				    </view>  
				      <view class="review-content">  
				        {{ review.content }}  
				      </view>  
				    </view>  
			</view>
			<view class="bottom">
					<u-popup :show="show" @close="close" @open="open" :round="10" :closeable='true'>
						<view class="dingdan">
							服务订单
						</view>
			            <view v-for="(item, index) in checkboxList1" :key="index" class="fwall1">
			            	<view class="taocan">
			            		<view class="box2-1">
			            			<u-checkbox
			            			  v-model="item.disabled"  
			            			  @change="handleCheckChange(index)"
			            			 :shape="'circle'"
			            			 :size="'36rpx'"
			            			>
			            			</u-checkbox>   
			            			<span :style="{ color: item.disabled ? '#2979FF' : 'black' }">{{ item.name }}</span> 
			            		</view>
			            		<view class="box2-2">
			            			<text>￥{{item.money}}</text>
			            		</view>
			            	</view>
			              </view>
						<view class="bottom2">
							<view @click="show = true" class="gwcbutton1">合计：￥360</view>
							<view @click="show = true" class="gwcbutton2">确认已选服务</view>
						</view>
					</u-popup>
					<view class="bottom2">
						<view @click="show = true" class="gwcbutton1">购物车（0）</view>
						<view class="gwcbutton2">确认已选服务</view>
					</view>
					
				</view>
		 </view>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxValue1:[],
				            // 基本案列数据
				            checkboxList1: [{
				                    name: '日式水晶打蜡',
				                    disabled: false,
									money:199,
				                },
				                {
				                    name: '车身去氧化',
				                    disabled: false,
									money:199,
				                },
				                {
				                    name: '车身去氧化',
				                    disabled: false,
									money:199,
				                }
				            ],
				 show: false,
				 checkboxList: [  
				        {	name: '小保养套餐（合成机油+机滤）',
							isChecked: false,
							oldmoney:'60',
							newmoney:'35.9',
							xiangqing:'这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍'},  
						{	name: '小保养套餐（合成机油+机滤）',
							isChecked: false,
							oldmoney:'60',
							newmoney:'35.9',
							xiangqing:'这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍'},
						{	name: '小保养套餐（合成机油+机滤）',
							isChecked: false,
							oldmoney:'60',
							newmoney:'35.9',
							xiangqing:'这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍'},
				        // ...  
				      ],  
				 reviews: [  
				         {  
				           date: '2022-12-31',  
				           stars: 4,  
				           content: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！', // 注意：这里我根据图片信息做了合理的假设，因为图片中的一星评价与此表述不完全匹配  
				         },  
				         {  
				           date: '2022-12-31',  
				           stars: 4,  
				           content: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！',  
				         },  
						 {
						   date: '2022-12-31',  
						   stars: 4,  
						   content: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！',  
						 }
				         // 购物车选项实际上不是一条评价，但为了简化示例，这里不额外处理  
				       ],  
			}
		},
		 methods: {  
			  open() {
			         // console.log('open');
			       },
			       close() {
			         this.show = false
			         // console.log('close');
			       },
		      handleCheckChange(index) {  
		           // 这里可以处理复选框状态变化时的额外逻辑  
		           // 但如果v-model已经正确工作，并且你只是需要更新样式，那么这个方法可能不是必需的  
					
		           console.log(`Checkbox ${index} changed to ${this.checkboxList[index].isChecked}`);
				   this.checkboxList[index].isChecked=!this.checkboxList[index].isChecked
		         },  
				 checkboxChange(n) {
				             console.log('change', n);
				         }

		  }  
		 
		
	}
	   
</script>

<style lang="scss">
	.fwall1{
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	.xuanzhe{
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	.dingdan{
		margin: 20rpx;
	}
	.gwcbutton1{
		background-image: url("../../static/车联网服务-04汽车保养-03门店详情_slices/矩形 10 拷贝@2x.png");
		background-size: 300rpx;
		width: 300rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		color: white;
	}
	.gwcbutton2{
		background-image: url("../../static/车联网服务-04汽车保养-03门店详情_slices/矩形 10 拷贝 2@2x.png");
		background-size: 300rpx;
		width: 300rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		color: white;
	}
	.bottom2{
		height: 150rpx;
		background-color: white;	
		align-items: center;
		display: flex;
		justify-content: space-around;
	}
	.bottom{
		width: 94%;
		height: 150rpx;
		position: fixed;
		bottom: 0;

	}
	.fwtitle{
		margin: 40rpx;
		font-weight: 600;
	}
	
	.taocan{
		font-size: 28rpx;
		margin: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
	}
	.xiaoqing{
		font-size: 28rpx;
		margin: 20rpx 40rpx;
		padding-bottom: 20rpx;

	}
	.xiaoqing:nth-child(2){
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	.tx1{
		font-size: 32rpx;
		color: red;
		margin-right: 20rpx;
	}
	.tx2{
		color: #999;
		text-decoration: line-through;
	}
	.box2-1{
		display: flex;
	}
	.box2-2{
		float: right;
	}
	// .custom-text {  
	//   /* 基本的文字样式 */  
	// }  
	// .text-color-changed {  
	//   color: red; /* 当复选框选中时改变文字颜色 */  
	// }  
	.slot{
		padding-top: 40rpx;
	}
	.baoyang{
		width: 94%;
		height: 500rpx;
		margin-left: 3%;
		background-color: skyblue;
		border-radius: 30rpx 30rpx 0 0;
		position: absolute;
		top: 150rpx;
	}
	.box1,.box2{
		width: 100%;
		margin:auto;
		padding-top: 6%;
		padding-bottom: 6%;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 40rpx;

	}
	.box1-1{
		width: 88%;
		margin: auto;
		image{
			width: 100%;
		border-radius: 30rpx;	
		}
	}
	.box1-2{
		margin-left: 6%;
		margin-top: 30rpx;
		.box1-2-1 p{
			font-weight: 600;
		}
		.box1-2-1 text{
			margin-left: 30rpx;
		}
		.box1-2-2 image{
			width: 30rpx;
			height: 30rpx;
			margin-left: 30rpx;
		}	
		text{
			font-size: 26rpx;
		}
	}
	
	.startimg{
		width: 25rpx;
		height: 25rpx;
	}
	.box3 {  
		width: 100%;
		margin:30rpx auto;
		padding-top: 6%;
		padding-bottom: 6%;
		border-radius: 20rpx;
	  display: flex;  	
	  flex-direction: column;  
	  align-items: flex-start;  
	  background-color: white;
	  text{
		  font-weight: 600;
		  margin-left: 40rpx;
		  margin-bottom: 40rpx;
	  }
	}  
	  
	.review-item {  
	  margin-bottom: 20px;  

	  .img{
		  	  float: left;
			  width: 180rpx;
			  height: 200rpx;
			   display: flex;  
			    justify-content: center;
		  image{
		width: 120rpx;
		  height: 120rpx;  
		   max-width: 90%; /* 使图片宽度不超过容器宽度 */  
		   border-radius: 50%;
		  }
		
	  }
	}  
	  
	.review-header {  
		width: 70%;
	  display: flex;  
	  justify-content: space-between;  
	  align-items: center;  
	}  
	  
	.user-name{
		font-weight: 600;
	}
	 .date {  
	  font-size: 14px; 
	  color: #666;  
	}  
	  
	.stars {  
	  display: inline-block;  
	}  
	  
	.star {  
	  color: gold;  
	}  
	  
	.review-content {  
	  margin-top: 5px;  
	  font-size: 28rpx;  
	  color: #333;  
	}  
</style>
